import styles from "./index.css" assert { type: "css" };
class myDiv extends HTMLElement {
	// 监听
	static get observedAttributes() {
		return ["title", "background", "color"];
	}

	constructor() {
		super();
		// 这样我们才能够去追加元素
		this.attachShadow({ mode: "open" });

		this.shadowRoot.adoptedStyleSheets = [styles];
	}

	// 重要：生命周期方法 开始
	connectedCallback() {
		console.log("connectedCallback生命周期", styles);

		// 获取元素
		// console.log(this.shadowRoot.querySelector(".content"))
		// 获取属性
		// console.log( this.getAttribute("data-title"))
		this.render({
			title: this.getAttribute("title"),
            background: this.getAttribute("background"),
            color: this.getAttribute("color"),
		});
		document.addEventListener("click", (e) => {
			// 重要：冒泡的顺序，通过这个可以判断有没有在鼠标内部进行点击
			if (e.composedPath().includes(this)) {
				// console.log("点击了里面");
			}
		});
	}

	closeRender() {
		console.log("borderadd");
		this.shadowRoot
			.querySelector(".mask_player_title_close")
			.addEventListener("click", () => {
				this.shadowRoot.querySelector(".mask").style.display = "none";
			});
	}

	// 重要：生命周期方法 重新渲染 .甚至还是第一次进行渲染，比connect还快
	// 二次渲染的时候好用
	attributeChangedCallback(attr, oldValue, newValue) {
		if (oldValue) {
			switch (attr) {
				case "title":
					this.shadowRoot.querySelector(".mask_player_title_text").textContent =
						"|" + newValue;
					break;
				case "background":
                    console.log("sss",newValue)
					this.shadowRoot.querySelector(".mask_player").style.background =
						newValue;
					break;
                case "color":
                    this.shadowRoot.querySelector(".mask_player_container").style.color =
                        newValue;
                    break;
			}
		}
		console.log("arrributeChangeCallback", attr, oldValue, newValue);
	}
	render(data) {
		let { title,background,color } = data;
		// console.log()
		let nodeTemplate = document.createElement("template");
		nodeTemplate.innerHTML = `

        <div  class="mask" >
        <div class="mask_player" style="background:${background};">
          <div class="mask_player_title" style="color:${color}">
            <div class="mask_player_title_text">| ${title}</div>
            <div class="mask_player_title_close" >x</div>
          </div>
          <div class="mask_player_container">     
            <slot ></slot>
          </div>
        </div>
      </div>    
        `;
        this.shadowRoot.appendChild(nodeTemplate.content);
        this.closeRender();
	}
}

// 名字必须小写 必须有横线
customElements.define("my-div", myDiv);
